{include file="public/head"/}
<style>
    body {
        background-color: #ffffff;
    }
</style>

<body>
    <div class="layui-form layuimini-form">

        <div class="layui-form-item">
            <label class="layui-form-label required">广告位置</label>
            <div class="layui-input-block">
                <select name="pid" lay-verify="required" lay-search lay-verify="required" lay-reqtext="必须选择广告位置">
                    <option value="">请选择广告位置</option>
                    {volist name="positions" id="vo"}
                        <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">广告标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="required" lay-reqtext="请输入广告标题" placeholder="请输入广告标题"
                    value="" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">广告图片</label>
            <div class="layui-input-inline">
                <input type="hidden" name="thumb" id="img2" value="" lay-verify="required" lay-reqtext="图片不可为空">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="img">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="img1" src="" style="width:300px;">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">链接类型</label>
            <div class="layui-input-block">
                <input type="text" name="link" autocomplete="off" placeholder="请输入链接类型(article)" class="layui-input">
                <tip>链接输入描述： article-(文章跳转) , goods-(商品跳转), pages-(程序页面跳转) </tip>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">链接参数</label>
            <div class="layui-input-block">
                <input type="text" name="url" autocomplete="off" placeholder="请输入链接参数(pages/index/index)" class="layui-input">
                <tip>链接输入描述： (文章跳转id) , goods-(商品跳转id), (示例：'pages/index/index')-(程序页面跳转链接) </tip>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">广告状态</label>
            <div class="layui-input-block">
                <input type="checkbox" checked name="status" value="1" lay-skin="switch" lay-text="启用中|关闭中">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
                <a href="javascript:;"  class="layui-btn layui-btn-primary layui-border" lay-active="closePage">关闭</a>
            </div>
        </div>
    </div>
    </div>
    <script>
        layui.use(['form','upload','util'], function () {
            var form = layui.form,
                layer = layui.layer,
                upload = layui.upload,
                util = layui.util,
                $ = layui.$;

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#img',
                url: "{:url('upFiles/upload')}",
                data: {width:250,height:250},
                accept: 'images', //普通文件
                exts: 'jpg|png|gif|jpeg', //只允许上传压缩文件
                before: function () {
                //开始加载效果
                    layui.use('layer', function () {
                        layui.layer.load();
                        $(".layui-layer-shade").css('background', '#000000')
                        $(".layui-layer-shade").css('opacity', '0.2')
                        $(".layui-layer-shade").click(function (event) {
                            event.stopPropagation();
                        })
                    })
                },
                done: function(res){
                    //上传成功结束加载效果
                    layui.use('layer', function () {
                        layui.layer.closeAll();
                        setTimeout(function () {
                            layui.layer.closeAll();
                        }, 2000);
                    });
                    if(res.code === 1){
                        $('#img1').attr('src', res.url);
                        $('#img2').val(res.url);
                        layer.msg(res.info, {icon: 1});
                    } else {
                        layer.msg(res.msg, {icon: 5});
                    }
                },
                error: function(){
                    //上传成功结束加载效果
                    layui.use('layer', function () {
                        layui.layer.closeAll();
                        setTimeout(function () {
                            layui.layer.closeAll();
                        }, 2000);
                    });
                    return layer.msg('上传失败',{icon:2});
                }
            });

            //监听提交
            form.on('submit(saveBtn)', function (data) {
                // 提交到方法 默认为本身
                delete data.field.file; // 删除文件上传的file
                if(data.field.status == undefined) {
                    data.field.status = 0;
                }
                $.post("{:url('add')}",data.field,function(res){
                    if(res.code > 0){
                      layer.msg(res.msg,{time:1800,icon:1});
                      // 关闭弹出层
                      setTimeout(() => {
                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.location.reload();//刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
                        parent.layer.close(iframeIndex);
                      }, 1800);
                    }else{
                        layer.msg(res.msg,{time:1800,icon:2});
                    }
                });
            });

            util.event('lay-active',{
                closePage: function() {
                    var iframeIndex = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(iframeIndex);
                }
            });
            
        });
    </script>
    {include file="public/footer"/}